<!doctype html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css" />
    <link rel="stylesheet" type="text/css" href="css/loaders.css" />
    <title>css3 加载loading动画特效</title>
</head>

<body>
    <main>
        <div class="loaders">
            <div class="loader">
                <div class="loader-inner ball-pulse">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-grid-pulse">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-clip-rotate">
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-clip-rotate-pulse">
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner square-spin">
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-clip-rotate-multiple">
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-pulse-rise">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-rotate">
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner cube-transition">
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-zig-zag">
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-zig-zag-deflect">
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-triangle-path">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-scale">
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner line-scale">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner line-scale-party">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-scale-multiple">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-pulse-sync">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-beat">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner line-scale-pulse-out">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner line-scale-pulse-out-rapid">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-scale-ripple">
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-scale-ripple-multiple">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-spin-fade-loader">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner line-spin-fade-loader">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner triangle-skew-spin">
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner pacman">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-grid-beat">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner semi-circle-spin">
                    <div></div>
                </div>
            </div>


            <div class="loader">
                <div class="loader-inner">
                    <div class="k-line k-lineA-1"></div>
                    <div class="k-line k-lineA-2"></div>
                    <div class="k-line k-lineA-3"></div>
                    <div class="k-line k-lineA-4"></div>
                    <div class="k-line k-lineA-5"></div>
                </div>
            </div>
            <style>
                .k-line {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    border-radius: 15px;
                    margin-top: 20px;
                    background: #fff;
                }

                .k-lineA-1 {
                    animation: k-loadingA 1.5s 0s infinite;
                }

                .k-lineA-2 {
                    animation: k-loadingA 1.5s 0.3s infinite;
                }

                .k-lineA-3 {
                    animation: k-loadingA 1.5s 0.6s infinite;
                }

                .k-lineA-4 {
                    animation: k-loadingA 1.5s 0.9s infinite;
                }

                .k-lineA-5 {
                    animation: k-loadingA 1.5s 1.2s infinite;
                }

                @keyframes k-loadingA {
                    50% {
                        height: 40px;
                    }

                    100% {
                        height: 15px;
                    }
                }
            </style>


            <div class="loader">
                <div class="loader-inner">
                    <div class="k-line k-lineB-1"></div>
                    <div class="k-line k-lineB-2"></div>
                    <div class="k-line k-lineB-3"></div>
                    <div class="k-line k-lineB-4"></div>
                    <div class="k-line k-lineB-5"></div>
                </div>
            </div>
            <style>
                .k-lineB-1 {
                    animation: k-loadingB 1.5s 0s infinite;
                }

                .k-lineB-2 {
                    animation: k-loadingB 1.5s 0.1s infinite;
                }

                .k-lineB-3 {
                    animation: k-loadingB 1.5s 0.2s infinite;
                }

                .k-lineB-4 {
                    animation: k-loadingB 1.5s 0.3s infinite;
                }

                .k-lineB-5 {
                    animation: k-loadingB 1.5s 0.4s infinite;
                }

                @keyframes k-loadingB {
                    50% {
                        width: 40px;
                    }

                    100% {
                        width: 15px;
                    }
                }
            </style>

            <div class="loader">
                <div class="loader-inner">
                    <div class="k-line k-lineC-1"></div>
                    <div class="k-line k-lineC-2"></div>
                    <div class="k-line k-lineC-3"></div>
                    <div class="k-line k-lineC-4"></div>
                    <div class="k-line k-lineC-5"></div>
                </div>
            </div>

            <style>
                .k-lineC-1 {
                    animation: k-loadingC 1s 0s infinite;
                }

                .k-lineC-2 {
                    animation: k-loadingC 1s 0.1s infinite;
                }

                .k-lineC-3 {
                    animation: k-loadingC 1s 0.2s infinite;
                }

                .k-lineC-4 {
                    animation: k-loadingC 1s 0.3s infinite;
                }

                .k-lineC-5 {
                    animation: k-loadingC 1s 0.4s infinite;
                }

                @keyframes k-loadingC {
                    50% {
                        transform: translateY(-20px);
                    }

                    100% {
                        transform: translateY(0px);
                    }
                }
            </style>


            <div class="loader">
                <div class="loader-inner">
                    <div class="k-line k-lineD-1"></div>
                    <div class="k-line k-lineD-2"></div>
                    <div class="k-line k-lineD-3"></div>
                    <div class="k-line k-lineD-4"></div>
                    <div class="k-line k-lineD-5"></div>
                </div>
            </div>
            <style>
                .k-lineD-1 {
                    animation: k-loadingD 1.5s 0s infinite;
                }

                .k-lineD-2 {
                    animation: k-loadingD 1.5s 0.1s infinite;
                }

                .k-lineD-3 {
                    animation: k-loadingD 1.5s 0.2s infinite;
                }

                .k-lineD-4 {
                    animation: k-loadingD 1.5s 0.3s infinite;
                }

                .k-lineD-5 {
                    animation: k-loadingD 1.5s 0.4s infinite;
                }

                @keyframes k-loadingD {
                    0% {
                        transform: translateY(0);
                        opacity: 1;
                    }

                    30% {
                        transform: translateY(0);
                        opacity: .3;
                    }

                    50% {
                        transform: translateY(-20px);
                        opacity: .8;
                    }

                    70% {
                        transform: translateY(3px);
                        opacity: .8;
                    }

                    85% {
                        transform: translateY(-3px);
                    }

                    100% {
                        transform: translateY(0);
                        opacity: 1;
                    }
                }
            </style>


            <div class="loader">
                <div class="loader-inner">
                    <div class="k-ring-1 k-loadingF-1"></div>
                </div>
            </div>

            <style>
                .k-ring-1 {
                    width: 10px;
                    height: 10px;
                    margin: 0 auto;
                    padding: 10px;
                    border: 7px dashed #fff;
                    border-radius: 50%;
                }

                .k-loadingF-1 {
                    animation: k-loadingF 1.5s cubic-bezier(.5, .5, .5, .5) infinite;
                }

                @keyframes k-loadingF {
                    50% {
                        transform: rotate(180deg);
                    }

                    100% {
                        transform: rotate(360deg);
                    }
                }
            </style>



            <div class="loader">
                <div class="loader-inner">
                    <div class="k-ring-2">
                        <div class="k-ball-holder k-loadingG-1">
                            <div class="k-ball1a"></div>
                        </div>
                    </div>
                </div>
            </div>

            <style>
                .k-ring-2 {
                    position: relative;
                    width: 45px;
                    height: 45px;
                    margin: 0 auto;
                    border: 4px solid #9C27B0;
                    border-radius: 100%;
                }

                .k-ball-holder {
                    position: absolute;
                    width: 12px;
                    height: 45px;
                    left: 17px;
                    top: 0;
                }

                .k-ball1a {
                    position: absolute;
                    top: -10px;
                    left: -1px;
                    width: 16px;
                    height: 16px;
                    border-radius: 100%;
                    background: #F44336;
                }

                .k-loadingG-1 {
                    animation: k-loadingG 1.5s linear infinite;
                }

                @keyframes k-loadingG {
                    100% {
                        transform: rotate(360deg);
                    }
                }
            </style>




            <div class="loader">
                <div class="loader-inner">
                    <div class="k-ring-2">
                        <div class="k-ball-holder k-loadingG-1">
                            <div class="k-ball2a"></div>
                            <div class="k-ball2b"></div>
                            <div class="k-ball2c"></div>
                            <div class="k-ball2d"></div>
                        </div>
                    </div>
                </div>
            </div>
            <style>
                .k-ball2a {
                    position: absolute;
                    top: -10px;
                    left: -1px;
                    width: 16px;
                    height: 16px;
                    border-radius: 100%;
                    background: #F44336;
                }

                .k-ball2b {
                    position: absolute;
                    top: 14px;
                    right: -25px;
                    width: 16px;
                    height: 16px;
                    border-radius: 100%;
                    background: #2b542c;
                }

                .k-ball2c {
                    position: absolute;
                    bottom: -10px;
                    left: -1px;
                    width: 16px;
                    height: 16px;
                    border-radius: 100%;
                    background: #761c19;
                }

                .k-ball2d {
                    position: absolute;
                    top: 14px;
                    left: -27px;
                    width: 16px;
                    height: 16px;
                    border-radius: 100%;
                    background: #ffd500;
                }

                .k-loadingG-1 {
                    animation: k-loadingG 1.5s linear infinite;
                }

                @keyframes k-loadingG {
                    100% {
                        transform: rotate(360deg);
                    }
                }
            </style>




            <div class="loader">
                <div class="loader-inner">
                    <div class="k-spinner">
                        <div class="k-bubble-1 k-loadingI-1"></div>
                        <div class="k-bubble-2 k-loadingI-2"></div>
                    </div>
                </div>
            </div>

            <style>
                .k-spinner {
                    position: relative;
                    width: 45px;
                    height: 45px;
                    margin: 0 auto;
                    animation: k-loadingH 2s linear infinite;
                }

                @keyframes k-loadingH {
                    100% {
                        transform: rotate(360deg);
                    }
                }

                .k-bubble-1,
                .k-bubble-2 {
                    position: absolute;
                    top: 0;
                    width: 25px;
                    height: 25px;
                    border-radius: 100%;
                    background-color: #4b9cdb;
                }

                .k-bubble-2 {
                    top: auto;
                    bottom: 0;
                }

                .k-loadingI-1 {
                    animation: k-loadingI 2s ease-in-out infinite;
                }

                .k-loadingI-2 {
                    animation: k-loadingI 2s -1s ease-in-out infinite;
                }

                @keyframes k-loadingI {

                    0%,
                    100% {
                        transform: scale(0);
                    }

                    50% {
                        transform: scale(1);
                    }
                }
            </style>

            <div class="loader" style="max-width:100%;">
                <div class="loader-inner">
                    <div class="k-line2 k-lineE-1"></div>
                    <div class="k-line2 k-lineE-2"></div>
                    <div class="k-line2 k-lineE-3"></div>
                    <div class="k-line2 k-lineE-4"></div>
                    <div class="k-line2 k-lineE-5"></div>
                </div>
            </div>

            <style>
                .k-line2 {
                    display: inline-block;
                    height: 10px;
                    width: 10px;
                    opacity: 0;
                    border-radius: 50%;
                    transform: translateX(-300px);
                    background-color: #ff720a;
                }

                .k-lineE-1 {
                    animation: k-loadingE 4s .8s infinite;
                }

                .k-lineE-2 {
                    animation: k-loadingE 4s .7s infinite;
                }

                .k-lineE-3 {
                    animation: k-loadingE 4s .6s infinite;
                }

                .k-lineE-4 {
                    animation: k-loadingE 4s .5s infinite;
                }

                .k-lineE-5 {
                    animation: k-loadingE 4s .4s infinite;
                }

                @keyframes k-loadingE {
                    50% {
                        transform: translateX(0);
                        opacity: .8;
                    }

                    100% {
                        transform: translateX(300px);
                        opacity: 0;
                    }
                }
            </style>






        </div>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelector('main').className += 'loaded';
        });
    </script>
</body>
